<template>
  <div class="page-container">
    <div class="info-container_header">
      <svg class="icon" @click="handleCancel" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4136">
        <path
          d="M499.498667 225.834667a42.666667 42.666667 0 0 1 0 60.330666L316.330667 469.333333H810.666667a42.666667 42.666667 0 1 1 0 85.333334H316.330667l183.168 183.168a42.666667 42.666667 0 1 1-60.330667 60.330666l-256-256a42.666667 42.666667 0 0 1 0-60.330666l256-256a42.666667 42.666667 0 0 1 60.330667 0z"
          p-id="4137"
        />
      </svg>

      <div class="title">订单详情</div>
    </div>
    <div class="info-container">
      <div class="info-container_body">
         <el-collapse :model-value="['basic']"  style="padding:10px">
      <el-collapse-item title="基础信息" name="basic">
        <div class="form-section">
            <div class="form-section_title">基础信息</div>
            <Abstract ref="abstract" :data="currentItem"></Abstract>
          </div>
      </el-collapse-item>
      <el-collapse-item title="附件信息" name="1">
        <div class="form-section">
           <div class="form-section_title">附件信息</div>
            <Accessories ref="accessories" :data="currentItem.accessories"></Accessories>
          </div>
      </el-collapse-item>
      <el-collapse-item title="支付信息" name="2">
        <div class="form-section">
           <div class="form-section_title">支付信息</div>
             <Pay ref="pay" :data="currentItem"></Pay>
          </div>
      </el-collapse-item>
      <el-collapse-item title="分佣信息" name="3">
        <div class="form-section">
           <div class="form-section_title">分佣信息</div>
            
            <b>基础分成</b>

            <el-form ref="refFrom" label-position="top" class="padding">
              <div style="background:#F6F7FB;padding:20px">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="分成比例（%）"> {{currentItem.vendorOrder.bonusRatio}}% </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="分成金额（元）">
                      {{currentItem.vendorOrder.bonusAmount/100}}
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="时间范围（合同有效期内）">
                      {{currentItem.vendorOrder.startFrom}}-{{currentItem.vendorOrder.endTo}}
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-form>
          </div>
      </el-collapse-item>
      <el-collapse-item title="使用摘要" name="4">
        <div class="form-section">
           <div class="form-section_title">使用摘要</div>
            <Executions ref="executions" :data="currentItem" />
          </div>
      </el-collapse-item>
 <el-collapse-item title="退款信息" name="5">
        <div class="form-section">
          <div class="form-section_title">退款信息</div>
            <Refunds ref="refunds" :data="currentItem" />
          </div>
      </el-collapse-item>
         </el-collapse>
      </div>

      <div class="info-container_footer">
        <el-button @click="cancel">退款</el-button>
      </div>
    </div>

    <RefundSet ref="refRefundSet"></RefundSet>
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent } from 'vue';
import { getOrder } from '@/api/operation/order/index';
import { useRouter } from 'vue-router';
import common from '@/utils/common.ts';

export default {
  components: {
    Abstract: defineAsyncComponent(() => import('./abstract.vue')),
    Accessories: defineAsyncComponent(() => import('./accessories.vue')),
    Pay: defineAsyncComponent(() => import('./pay.vue')),
    Executions: defineAsyncComponent(() => import('./executions.vue')),
    Refunds: defineAsyncComponent(() => import('./refunds.vue')),
    RefundSet: defineAsyncComponent(() => import('@/views/operation/order/common/refund-set/index.vue'))
  },

  mounted() {
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    this.proxy = proxy;

    const route = useRoute();
    this.currentItem.id = route.query.id;

    this.init();
  },
  data() {
    return {
      proxy: null,
      currentItem: {
        vendorOrder: {}
      }
    };
  },
  created() {},
  methods: {
    init() {
      let id = this.currentItem.id;
      this.get(id);
    },

    cancel() {
      let data = this.currentItem;
      this.$refs.refRefundSet.openRefundSet(data);
    },
    get(id) {
      getOrder(id).then((res) => {
        let data = res.data;
        if (data.vendorOrder == null) data.vendorOrder = {};
        this.currentItem = data;

        this.$nextTick(() => {
          this.$refs.abstract.init(data);
          this.$refs.pay.init(data);
          this.$refs.executions.init(data);
          this.$refs.refunds.init(data);

          this.$refs.accessories.init(data.accessories);
        });
      });
    },

    //返回
    handleCancel() {
      this.proxy?.$tab.closePage();
    }
  }
};
</script>

<style lang="scss"  scoped>
.info-container_header {
  background: white;

  .icon {
    width: 30px;
    height: 30px;
    fill: blank;
  }
}
</style>